<template>
  <div class="userIndex">
    <el-container>
      <el-header>
        <span class="search">人员搜索:</span>
        <el-input
          v-model="search"
          size="small"
          style="width: 200px"
          class="search"
          placeholder="请输入"
        />
        <span class="role">角色:</span>
        <el-select v-model="role" placeholder="请选择" size="small">
          <el-option label="运营员" value="true" />
          <el-option label="维修员" value="false" />
        </el-select>
        <el-button type="primary" icon="el-icon-search" style="width: 70px" size="small" @click="searchFn">查询</el-button>
      </el-header>
      <el-main>
        <TableComponent
          :table-cols="tableCols"
          :table-data="tableData"
          :is-loading="isLoading"
        >
          <template #otherTableCol>
            <el-table-column
              label="操作"
              align="center"
              width="200%"
            >
              <template #default="{ row }">
                <div class="actions">
                  <el-button
                    type="text"
                    @click="open(row.userId)"
                  >
                    查看详情
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </template>
        </TableComponent>
      </el-main>
      <el-footer>
        <span>共{{ total }}条记录</span>&nbsp;&nbsp;
        <span>第{{ queryObj.pageIndex }}/{{ totalPage }}页</span>
        <el-pagination
          background
          style="float: right"
          :current-page="+queryObj.pageIndex"
          :page-size="+queryObj.pageSize"
          prev-text="上一页"
          next-text="下一页"
          layout="prev, next"
          :total="+total"
          @current-change="handleCurrentChange"
        />
      </el-footer>
    </el-container>
    <ShowDialog ref="dialog" :current-id="currentId" />
  </div>
</template>

<script>
import ShowDialog from './components/ShowDialog.vue'
import TableComponent from '@/views/users/components/TableComponent.vue'
import { getUserWorkList } from '@/api/peoplemanger'
export default {
  name: 'UserWork',
  components: {
    ShowDialog,
    TableComponent

  },
  data () {
    return {
      tableCols: [
        { label: '序号', type: 'index', index: true },
        { label: '人员姓名', prop: 'userName', width: '250%' },
        { label: '角色', prop: 'roleName', width: '250%' },
        { label: '联系电话', prop: 'mobile', width: '250%' },
        {
          label: '完成工单(本月)',
          width: '240%',
          prop: 'workCount'
        },
        { label: '进行中工单', prop: 'progressTotal', width: '250%' },
        { label: '拒绝工单(本月)', prop: 'cancelCount', width: '250%' }
      ],
      isloading: false,
      role: '',
      queryObj: {
        pageIndex: 1,
        pageSize: 10,
        userName: '',
        isRepair: ''
      },
      tableData: [],
      total: 0,
      totalPage: 0,
      search: '',
      currentId: 0
    }
  },

  created () {
    this.getListFn()
  },
  mounted () {},

  methods: {
    searchFn () {
      this.queryObj.userName = this.search
      this.queryObj.isRepair = this.role
      this.getListFn()
      this.search = ''
    },
    async getListFn () {
      this.isLoading = true
      const data = await getUserWorkList(this.queryObj)
      // console.log(data)
      this.tableData = data.currentPageRecords
      this.isLoading = false
      this.total = data.totalCount
      this.totalPage = data.totalPage
    },
    open (id) {
      console.log(id)
      this.currentId = id
      this.$nextTick(() => {
        this.$refs.dialog.getWorkDetail()
      })
      this.$refs.dialog.DialogOpen()
    },
    handleCurrentChange (val) {
      console.log(val)
      this.queryObj.pageIndex = val
      this.getListFn()
    }
  }
}

</script>

<style lang="scss" scoped>
.userIndex {
  background-color: #f8fafd;
}
.role {
   margin:0 20px 0 10px;
    font-size: 14px;
    color: #606266;
}
.el-container {
padding: 20px;
}
::v-deep .el-table .cell {
  line-height: 36px;
}
::v-deep .el-table {
  td {
    padding: 2px 0;
    border: none;
  }
  &::before {
    height: 0;
  }
}
::v-deep.el-header {
  margin-bottom: 20px;
   background-color: #fff;
  line-height: 60px;
  .search {
    margin-right: 20px;
    font-size: 14px;
    color: #606266;
  }
  .el-button--primary {
    background-color: #5f84ff;
    width: 100px;
    margin-left: 10px;
  }
}
.el-main {
 background-color: #fff;;
}
.el-footer {
  line-height: 60px;
  background-color: #fff;
  span {
    font-size: 16px;
    color: #dbdfe5;
  }
  .el-pagination {
    margin-top: 10px;
  }
}
::v-deep .btn-prev:disabled {
  background: #edf0f9 !important;
}
::v-deep .btn-next:disabled {
  background: #edf0f9 !important;
}
::v-deep .btn-prev{
 width: 70px;
 height: 32px;
 background-color: #d5ddf8 !important;
}
::v-deep .btn-next{
  margin: 0 20px;
 width: 70px;
 height: 32px;
 background-color: #d5ddf8 !important;
}
</style>
